/* eslint no-underscore-dangle: 0 */
import React, { Component } from 'react';
import { Table, Pagination, Message } from '@alifd/next';
import IceContainer from '@icedesign/container';
import IceLabel from '@icedesign/label';
import FilterForm from './Filter';
import styles from './index.module.scss';
import request from '../../../../utils/request';
import { host, stringCheck } from '../../../../const';

export default class EnhanceTable extends Component {
    constructor(props) {
        super(props);

        this.state = {
            mapTableDataSourece: {
                total: 0,
            },
            query: {
                page: 1,
                pageSize: 10,
            },
        };
        this.refreshTableData();
    }

  refreshTableData=() => {
      request({
          method: 'POST',
          url: `${host}/map/query`,
          data: this.state.query,
      }).then((res) => {
          const data = res?.data?.data;
          this.setState({
              mapTableDataSourece: data,
          });
      });
  }

  filterFormChange=(value) => {
      this.state.query.name = value.name;
  }

  filterTable=() => {
      this.state.query.page = 1;
      this.state.query.pageSize = 10;
      this.refreshTableData();
  }

  handlePaginationChange=(value) => {
      this.state.query.page = value;
      this.refreshTableData();
  }

  renderOper = (value, index, record) => {
      let oper1,
          oper2;
      const url = `${host}/${record.path}`;
      oper1 = <a href={url} target="_blank">显示</a>;
      oper2 = <a href="javascript:;" onClick={this.deleteMap.bind(this, record)}>删除</a>;
      return (
          <div>
              {oper1} {oper2}
          </div>
      );
  };

  // componentDidMount()
  // {
  //   this.timerID = setInterval(
  //         () => {
  //           this.refreshTableData()
  //         },5000
  //     );
  // }

  // componentWillUnmount(){
  //   clearInterval(this.timerID)
  // }

  deleteMap=(record) => {
      request({
          method: 'DELETE',
          url: `${host}/map/${record.id}`,
      }).then(() => {
          Message.success('删除成功');
          this.refreshTableData();
      });
  }


  render() {
      return (
          <div className="filter-table">
              <IceContainer title="内容筛选">
                  <FilterForm
                      onChange={this.filterFormChange}
                      onSubmit={this.filterTable}
                  />
              </IceContainer>
              <IceContainer>
                  <Table
                      dataSource={this.state.mapTableDataSourece.list}
                      className="basic-table"
                      style={styles.basicTable}
                      hasBorder={false}
                  >
                      <Table.Column
                          title="地图5555名称"
                          dataIndex="name"
                      />
                      <Table.Column
                          title="操作"
                          width={150}
                          cell={this.renderOper}
                      />
                  </Table>
                  <div className={styles.paginationWrapper}>
                      <Pagination
                          current={this.state.query.page}
                          onChange={this.handlePaginationChange}
                          total={this.state.mapTableDataSourece.total}
                          pageSize={10}
                      />
                  </div>
              </IceContainer>
          </div>
      );
  }
}
